<template>
  <div class="goodsCate">

    <!-- 顶部搜索组件，下拉框、模糊搜索的输入框，搜索按钮 -->
    <el-row>
      <!-- 下拉框 -->
      <el-cascader
        expand-trigger="hover"
        change-on-select
        :options="response.goodsCateCascader"
        v-model="page.searchCascaderOption"
      >
      </el-cascader>

      <!-- 输入框 -->
      <el-input
        style="width:200px"
        placeholder="请输入搜索种类名称"
        v-model="page.searchCategoryName"
        clearable
      >
      </el-input>

      <!-- 搜索按钮 -->
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="searchCategorys"
      >搜索</el-button>

    </el-row>

    <!-- 新增按钮 -->
    <el-row style="margin-bottom:10px;text-align: right">
      <el-button
        type="primary"
        @click="page.dialogFormVisible = true"
      >新增种类</el-button>
    </el-row>

    <!-- 点击新增按钮商品弹出窗口 -->
    <el-dialog
      :title="page.form.title"
      :visible.sync="page.dialogFormVisible"
      width="30%"
      class="dialog"
    >
      <el-form
        :model="page.form"
        label-width="80px"
        :rules="page.FromRules"
        ref="ruleForm"
      >
        <el-form-item label="父级">
          <el-cascader
            expand-trigger="hover"
            change-on-select
            placeholder="新增根种类可不选"
            :options="response.goodsCateCascader"
            v-model="page.cascaderOption"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item
          label="零件"
          prop="goodsCategoryName"
        >
          <el-input
            style="width:217px"
            v-model="page.form.goodsCategoryName"
            placeholder="请输入加工种类名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="权重">
          <el-input-number
            style="width:217px"
            class="priority"
            v-model="page.form.priority"
            size="medium"
            :min="1"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submit('ruleForm')"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-row>
      <el-table
        :data="response.goodsCatesData"
        :height="page.tableHeight"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="goodsCategoryName"
          label="种类名称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="enableStatus"
          label="状态"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="level"
          width="180"
          label="层级"
        >
        </el-table-column>
        <el-table-column
          prop="priority"
          width="180"
          label="权重"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          prop="lastEditTime"
          label="上次编辑时间"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250"
        >
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                size="small"
                @click="handleRowPreClick(scope.row)"
                :disabled="scope.row.hasParent"
              >上一级</el-button>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-edit"
                @click="handleRowEditClick(scope.row)"
              ></el-button>
              <el-button
                type="primary"
                size="small"
                @click="handleRowNextClick(scope.row)"
              >下一级<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import Tips from "@/utils/tipsUtil";
const _tips = new Tips();
import GoodsCategory from "@/service/bill/goods-category-service";
import Vue from "vue";
const _goodsCategory = new GoodsCategory();
export default {
  data() {
    return {
      //页面组件需要用到属性
      page: {
        searchCategoryName: "", //搜索的种类名称，非必填
        searchCascaderOption: [], //搜索的种类类型，非必填

        tableHeight: 50,
        preParentId: 0, //缓存表格上一级的父级ID
        cascaderOption: [0],
        dialogFormVisible: false,
        dialogFormIsAdd: true,

        //新增或者修改加工零件的表单属性
        form: {
          title: "新增种类", //标题，默认显示新操作信息
          id: "",
          parentId: 0, //加工零件的ID,当修改操作的时候需要用到
          goodsCategoryName: "", //加工零件的名称
          priority: "1" //权重，排序用
        },

        FromRules: {
          goodsCategoryName: [
            { required: true, message: "请输入加工种类名称！", trigger: "blur" }
          ]
        }
      },
      //请求后台API需要用户的属性
      request: {
        parentId: 0 //页面初始化默认查询parentId为0级别的种类信息
      },
      //请求后台Api接口，返回的数据的属性缓存
      response: {
        goodsCatesData: [],
        goodsCateCascader: [{ label: "根种类", value: 0 }] //级联下拉框数据
      }
    };
  },
  components: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getGoodsCates();
      this.getGoodsCateCascader();
    },
    getGoodsCates() {
      const vue = this;
      vue.requestGoodsCate(vue.request.parentId);
    },

    getGoodsCateCascader() {
      const vue = this;
      _goodsCategory.getGoodsCateCascader().then(
        res => {
          vue.response.goodsCateCascader = vue.response.goodsCateCascader.concat(
            res.data
          );
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    },

    handleRowPreClick(row) {
      this.requestGoodsCate(this.page.preParentId);
    },

    handleRowNextClick(row) {
      this.requestGoodsCate(row.id);
      //缓存上一级的父级id
      this.page.preParentId = row.parentId;
    },

    /**
     * 点击表格的编辑按钮响应的事件
     */
    handleRowEditClick(row) {
      const vue = this;
      vue.page.dialogFormIsAdd = false; //弹出窗的操作修改为编辑操作
      vue.page.form.title = "编辑种类";
      vue.page.dialogFormVisible = true;

      //编辑信息的回填
      vue.page.form.id = row.id;
      vue.page.form.goodsCategoryName = row.goodsCategoryName;
      vue.page.form.priority = row.priority;
    },

    /**
     * 新增
     */
    submit(form) {
      let vue = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          //判断当前弹出窗表单提交的是新增还是修改操作
          if (vue.page.dialogFormIsAdd) {
            //新增加工零件操做
            let requstParam = {
              parentId:
                vue.page.cascaderOption[vue.page.cascaderOption.length - 1],
              goodsCategoryName: vue.page.form.goodsCategoryName,
              priority: vue.page.form.priority
            };
            _goodsCategory.add(requstParam).then(
              res => {
                _tips.notifyTips(vue, res.msg);
                //刷新页面
                vue.getGoodsCates();
                vue.getGoodsCateCascader();
              },
              err => {
                _tips.notifyTips(vue, err.msg);
              }
            );
          } else {
            //修改操作
            let requstParam = {
              parentId:
                vue.page.cascaderOption[vue.page.cascaderOption.length - 1],
              goodsCategoryName: vue.page.form.goodsCategoryName,
              priority: vue.page.form.priority,
              id: vue.page.form.id
            };
            _goodsCategory.edit(requstParam).then(
              res => {
                _tips.notifyTips(vue, res.msg);
                //关闭弹出框
                vue.page.dialogFormVisible = false;
                //刷新页面
                vue.getGoodsCates();
                vue.getGoodsCateCascader();
              },
              err => {
                _tips.notifyTips(vue, err.msg);
              }
            );
          }
        }
      });
    },

    /**
     * 搜索按钮点击触发的事件
     */
    searchCategorys() {
      const vue = this;
      //获取搜索的信息
      let id = null; //搜索种类的id，后台根据该id找出其直接下一级子种类
      const searchCategoryName = vue.page.searchCategoryName; //搜索种类的名称

      const categoryOption = vue.page.searchCascaderOption;
      if (categoryOption.length > 0 && categoryOption != null) {
        id = categoryOption[categoryOption.length - 1]; //取出搜索的种类id
      }

      //请求参数的封装
      const requestParam = {
        parentId: id,
        CategoryName: searchCategoryName
      };
      _goodsCategory.getSearchGoodsCates(requestParam).then(
        res => {
          vue.initTableData(res);
        },
        err => {
          _tips.notifyTips(vue, err.data.msg);
        }
      );
    },

    //---------------------------页面封装的方法----------------------------------------------
    requestGoodsCate(parentId) {
      const vue = this;
      _goodsCategory.getGoodsCates({ parentId: parentId }).then(
        res => {
          //渲染表格的
          vue.initTableData(res);
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    },

    initTableData(res) {
      const vue = this;
      vue.response.goodsCatesData = res.data;
      if (res.data.length == 0) {
        vue.page.tableHeight = 70;
        _tips.notifyTips(vue, "暂无数据");
      } else {
        //表格高度动态赋值
        const size = res.data;
        if (size > 10) {
          vue.page.tableHeight = 700;
        } else {
          vue.page.tableHeight = 80 * res.data.length;
        }
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.goodsCate {
  text-align: left;
}
</style>
